<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-08-10 13:08:32
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-22 16:31:47
 * @version: 1.2.5
 * @Description: 角色管理
-->
<script setup lang="ts">
import { $t } from '@/plugins/i18n/index';
import { ModeEnum } from '@/enum/index';
import { DefaultModule } from '@/layout/Main';
import { DeleteButton, FormButton, DetailsButton, DeleteBatchDelete } from '@/layout/Widgets';
import type { IFormItems, ITableColumns } from '@/types/index.d';
import type { IRoleSearch, IRoleForm } from '@/types/system/index.d';

const MESSAGE = computed(() => {
    return {
        NAME: $t(`role.name`),
        CODE: $t(`role.code`),
        STATE: $t(`common.state`),
        OPERATE: $t(`common.operate`),
        SCOPE: $t(`role.scope`),
        DESCRIBE: $t(`common.describe`),
        PLACEHOLDER_NAME: $t(`common.placeholder.enter`, { suffix: $t(`role.name`) }),
        PLACEHOLDER_CODE: $t(`common.placeholder.enter`, { suffix: $t(`role.code`) }),
        PLACEHOLDER_SCOPE: $t(`common.placeholder.select`, { suffix: $t(`role.scope`) }),
        PLACEHOLDER_STATE: $t(`common.placeholder.select`, { suffix: $t(`common.state`) })
    }
});
const SearchItems = computed<Array<IFormItems>>(() => {
    return [
        { mode: ModeEnum.INPUT, label: MESSAGE.value.NAME, prop: 'name', placeholder: MESSAGE.value.PLACEHOLDER_NAME, width: '220px' },
        { mode: ModeEnum.SELECT, label: MESSAGE.value.STATE, prop: 'enabled', placeholder: MESSAGE.value.PLACEHOLDER_STATE, width: '150px', options: [] },
    ]
});
const GroupItems = computed<any>(() => {
    return [
        {
            render() {
                return h(FormButton,
                    {
                        items: FormItems.value, data: dataForm,
                        onSubmitClick(data: IRoleForm, close: () => void) {
                            console.log(data);

                        }
                    },
                )
            }
        },
        {
            render() {
                return h(DeleteBatchDelete, {
                    data: {},
                    onOnDeletes() {

                    }
                })
            }
        }
    ]
});
const FormItems = computed<Array<IFormItems>>(() => {
    return [
        {
            span: 24, mode: ModeEnum.INPUT, label: MESSAGE.value.NAME, placeholder: MESSAGE.value.PLACEHOLDER_NAME, prop: 'name', rules: [
                { required: true, message: MESSAGE.value.PLACEHOLDER_NAME, trigger: 'blur' },
            ]
        },
        {
            span: 24, mode: ModeEnum.INPUT, label: MESSAGE.value.CODE, placeholder: MESSAGE.value.PLACEHOLDER_CODE, prop: 'code', rules: [
                { required: true, message: MESSAGE.value.PLACEHOLDER_CODE, trigger: 'blur' },
            ]
        },
        { span: 24, mode: ModeEnum.SELECT, label: MESSAGE.value.SCOPE, placeholder: MESSAGE.value.PLACEHOLDER_SCOPE, prop: 'name', options: [] },
        { span: 24, mode: ModeEnum.TEXTAREA, label: MESSAGE.value.DESCRIBE, placeholder: MESSAGE.value.DESCRIBE, prop: 'description', maxlength: 60, rows: 5 },
    ]
});
// TODO 此处通过ref存在 国际化无法动态切换问题;但使用 computed 属性又存在table列无法动态隐藏/开大问题
const TableItems = ref<Array<ITableColumns>>([
    { mode: ModeEnum.SELECTION, label: 'ID', prop: 'id', width: 55, show: true },
    { mode: ModeEnum.INPUT, label: MESSAGE.value.NAME, prop: 'name', show: true },
    { mode: ModeEnum.INPUT, label: MESSAGE.value.CODE, prop: 'code', show: true },
    {
        mode: ModeEnum.OPERATOR, label: MESSAGE.value.OPERATE, prop: 'operate', show: true, operator:
            [
                {
                    render(row: any) {
                        return h(DetailsButton,
                            {
                                data: detailsData,items:[],
                            }
                        )
                    }
                },
                {
                    render(row: any) {
                        return h(FormButton,
                            {
                                edit: true, items: FormItems.value, data: dataForm,
                                onOnOpen(data) {
                                    console.log(row);
                                }
                            },
                        )
                    }
                },
                {
                    render(row: any) {
                        return h(DeleteButton)
                    }
                },
            ]
    }
]);

const searchData = reactive<IRoleSearch>({
    name: '',
    enabled: null
});
const dataForm = reactive<IRoleForm>({
    name: '',
    code: '',
    scope: null,
    description: '',
});
const tableData = ref<any>([
    { id: 1, name: '章三', code: 'sys' },
    { id: 1, name: '章三', code: 'sys' }
]);
const detailsData = reactive<any>({});
const onSearch = (data: IRoleSearch, close: () => void) => {
    console.log(data);
    close()
}

</script>
<template>
    <DefaultModule :search="{ Items: SearchItems, data: searchData }" :GroupItems="GroupItems"
        :table="{ Items: TableItems, data: tableData }" :onSearch="onSearch" />
</template>
